import React, { useState, Suspense, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Outlet } from "react-router-dom"
import {
    SettingOutlined, HomeOutlined, DollarOutlined, PieChartOutlined
    , CalendarOutlined, AccountBookOutlined
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu, Layout } from 'antd';
import { useNavigate } from 'react-router-dom';
import "./home.scss"
import Headers from '../../Header'
type MenuItem = Required<MenuProps>['items'][number];
const { Header, Footer, Sider, Content } = Layout;
function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
        type,
    } as MenuItem;
}
const Index = () => {
    const navigate = useNavigate()
    let arr: any = []
    var [items, setItems] = useState([])
    const checkedKeys = useSelector((state: any) => state.user_list.checkedKeys)
    // const checkedKeys = ["1", "2", "3", "4", "5", "6"]
    useEffect(() => {
        data()
    }, [])
    var menulist: any = [
        { index: "1", title: '首页', route: '/index/home', icon: <HomeOutlined /> },
        { index: "2", title: '订单管理', route: '/index/ordermanage', icon: <CalendarOutlined /> },
        { index: "3", title: '商品管理', route: '/index/commanage', icon: <AccountBookOutlined /> },
        { index: "4", title: '财务管理', route: '/index/financemanage', icon: <DollarOutlined /> },
        { index: "5", title: '数据分析', route: '/index/datanalysis', icon: <PieChartOutlined /> },
        { index: "6", title: '操作员管理', route: '/index/opermanage', icon: <SettingOutlined /> },
    ]
    const push: any = (key: any) => {
        // console.log(key.key);
        navigate(key.key)
    }
    //遍历权限数组，将每条数组加入到新数组中
    checkedKeys.forEach((item: any) => {
        arr.push(menu(item)[0])
    })
    //利用filter过滤菜单列表，根据index
    function menu(items: any) {
        return menulist.filter((item: any) => {
            return item.index == items
        })
    }
    //利用map函数映射出想要的菜单数组 ------> getItem('首页', '/index/home', <MailOutlined />) 将菜单数组定义为响应式，直接调用
    function data() {
        let list = arr.map((item: any) => {
            return getItem(item.title, item.route, item.icon)
        })
        setItems(list)
    }
    return (
        <div className='index'>
            {/* 路由渲染出口 */}
            <Layout>
                <Header style={{ backgroundColor: "rgba(67, 141, 238, 1)" }}>
                    <Headers></Headers>
                </Header>
                <Layout>
                    <Sider style={{ backgroundColor: '#fff' }}>
                        <Menu
                            items={items}
                            onClick={push}
                        />
                    </Sider>
                    <Content style={{ padding: '25px 0 0 25px'}}>
                        <Suspense fallback={<div>loading.....</div>}>
                            <Outlet></Outlet>
                        </Suspense>
                    </Content>
                </Layout>
            </Layout>

        </div>
    );
};

export default Index;